<template>
	<view class="page">
		<u-subsection :list="list" :current="curNow" mode="subsection" activeColor="#1e4297"
			@change="sectionChange"></u-subsection>
		<u-gap height="20" bgColor="#fff"></u-gap>

		<view v-if="curNow == 0">
			<u--form labelPosition="left" labelWidth="80px" :model="model1" :rules="rules" ref="uForm">
				<!-- 				<u-form-item label="客户" prop="order.name" borderBottom ref="item1">
					<u--input v-model="model1.order.name" placeholder="请输入客户" border="none"></u--input>
				</u-form-item> -->

				<u-form-item label="客户" prop="order.cust_name" borderBottom @click="showCust = true;" ref="item1">
					<u--input v-model="model1.order.cust_name" disabled disabledColor="#ffffff" placeholder="请选择客户"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="快递单号" prop="order.express_sn" borderBottom ref="item1">
					<u-row>
						<u-col span="10">
							<u--input v-model="model1.order.express_sn" placeholder="请输入或扫描快递单号"></u--input>
						</u-col>
						<u-col span="2">
							<u-icon @tap="getCode" name="scan" size="28"></u-icon>
						</u-col>
					</u-row>
				</u-form-item>
				<u-form-item label="总体积" borderBottom ref="item1">
					<u-row gutter="15">
						<u-col span="2">
							<u--input v-model="model1.order.long_length" placeholder="长cm" border="none"></u--input>
						</u-col>
						<u-col span="2">
							<u--input v-model="model1.order.width_length" placeholder="宽cm" border="none"></u--input>
						</u-col>
						<u-col span="2">
							<u--input v-model="model1.order.height_length" placeholder="高cm" border="none"></u--input>
						</u-col>
					</u-row>
				</u-form-item>

				<u-form-item label="物品数量" prop="order.number" borderBottom ref="item1">
					<u-number-box v-model="model1.order.number"></u-number-box>
				</u-form-item>

				<!-- 				<u-form-item label="物品类型" prop="order.type" borderBottom ref="item1">
					<u--input v-model="model1.order.type" placeholder="请输入物品类型" border="none"></u--input>
				</u-form-item> -->
				<u-form-item label="物品类型" prop="order.type_name" borderBottom @click="showType = true;" ref="item1">
					<u--input v-model="model1.order.type_name" disabled disabledColor="#ffffff" placeholder="请选择物品类型"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="物品照片" prop="order.images" borderBottom ref="item1">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1"></u-upload>
				</u-form-item>
				<u-form-item label="备注" prop="order.remark" borderBottom ref="item1">
					<u--textarea v-model="model1.order.remark" placeholder="请输入备注" count></u--textarea>
				</u-form-item>
			</u--form>
			<!-- 			<u-picker :show="showCust" :columns="custList" keyName="name" @cancel="showCust = false"
				@confirm="custSelect"></u-picker> -->

			<u-popup :show="showCust" @close="custClose">

				<view style="height:100vh">
					<u-cell icon="arrow-left" title="返回" @click="custClose"></u-cell>
					<view style="margin: 20rpx;">
						<u-search :showAction="true" v-model="svalue" actionText="搜索" placeholder="请输入客户"
							@search="search" @custom="search"></u-search>
						<u-list>
							<u-list-item v-for="(item, index) in custList" :key="index">
								<u-cell icon="account-fill" :title="item.name" @click="custSelect(item)">
									<u-tag v-if="item.area" slot="value" :text="item.area"></u-tag>
								</u-cell>
							</u-list-item>
						</u-list>
					</view>

				</view>
			</u-popup>

			<u-picker :show="showType" :columns="typeList" keyName="name" @cancel="showType = false"
				@confirm="typeSelect"></u-picker>
			<u-button @click="submit" class="submit" color="#1e4297">新建</u-button>
		</view>

		<view v-if="curNow == 1">
			<u-gap height="20" bgColor="#fff"></u-gap>
			<u--text text="未发货记录" size="20"></u--text>
			<u-gap height="10" bgColor="#fff"></u-gap>
			<view>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="1">
						<u--text text="序号" align="center"></u--text>
					</u-col>
					<u-col span="2">
						<u--text text="寄件人" align="center"></u--text>
					</u-col>
					<u-col span="5">
						<u--text text="快递单号" align="center"></u--text>
					</u-col>
					<u-col span="4">
						<u--text text="日期" align="center"></u--text>
					</u-col>
				</u-row>
				<u-line></u-line>
			</view>

			<view v-for="(item,index) in unshippedList" @click="gotoDetail(item.nid)" :key="index">
				<u-row customStyle="margin: 10px 0">
					<u-col span="1">
						<u--text :text="index + 1" align="center"></u--text>
					</u-col>
					<u-col span="2">
						<u--text :text="item.name" align="center"></u--text>
					</u-col>
					<u-col span="5">
						<u--text :text="item.express_sn" align="center"></u--text>
					</u-col>
					<u-col span="4">
						<u--text :text="item.add_date.slice(0,10)" align="center"></u--text>
					</u-col>
				</u-row>
				<u-line></u-line>
			</view>

			<u-empty mode="data" v-if="unshippedList.length == 0"></u-empty>
		</view>

		<view v-if="curNow == 0">
			<u-gap height="20" bgColor="#fff"></u-gap>
			<u--text text="今日订单" size="20"></u--text>
			<u-gap height="10" bgColor="#fff"></u-gap>
			<view>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="1">
						<u--text text="序号" align="center"></u--text>
					</u-col>
					<u-col span="2">
						<u--text text="寄件人" align="center"></u--text>
					</u-col>
					<u-col span="5">
						<u--text text="快递单号" align="center"></u--text>
					</u-col>
					<u-col span="4">
						<u--text text="日期" align="center"></u--text>
					</u-col>
				</u-row>
				<u-line></u-line>
			</view>

			<view v-for="(item,index) in todayOrderList" @click="gotoDetail(item.nid)" :key="index">
				<u-row customStyle="margin: 10px 0">
					<u-col span="1">
						<u--text :text="index + 1" align="center"></u--text>
					</u-col>
					<u-col span="2">
						<u--text :text="item.name" align="center"></u--text>
					</u-col>
					<u-col span="5">
						<u--text :text="item.express_sn" align="center"></u--text>
					</u-col>
					<u-col span="4">
						<u--text :text="item.add_date.slice(0,10)" align="center"></u--text>
					</u-col>
				</u-row>
				<u-line></u-line>
			</view>

			<u-empty mode="data" v-if="todayOrderList.length == 0"></u-empty>
		</view>



	</view>
</template>

<script>
	import * as Config from '@/utils/config.js';
	export default {
		data() {
			return {
				todayOrderList: [],
				list: ['资料录入', '未发货记录'],
				curNow: 0,
				fileList1: [],
				model1: {
					order: {
						express_sn: '',
						remark: '',
						image: '',
						number: 1
					}
				},
				rules: {
					'order.cust_name': {
						type: 'string',
						required: true,
						max: 30,
						message: '请选择客户',
						trigger: ['blur', 'change']
					},
					'order.express_sn': {
						type: 'string',
						max: 30,
						required: true,
						message: '请填写快递单号',
						trigger: ['blur', 'change']
					},
					'order.type_name': {
						type: 'string',
						max: 30,
						required: true,
						message: '请选择物品类型',
						trigger: ['blur', 'change']
					},
				},
				svalue: '',
				showCust: false,
				showType: false,
				custList: [],
				typeList: [],
				unshippedList: []
			}
		},
		onLoad(e) {

			if (e.user_id) {
				this.model1.order.cust_name = e.cust_name
				this.model1.order.user_id = e.user_id
			}

			this.getCustList()
			this.getTypeList()
			this.getTodayOrderList()
			this.getUnshippedList()
		},
		onShow() {

		},
		methods: {
			search(e) {
				this.page = 1
				this.getCustList()
			},

			custClose() {
				this.showCust = false
			},

			custSelect(e) {
				this.showCust = false
				this.model1.order.cust_name = e.name
				this.model1.order.user_id = e.nid
				this.$refs.uForm.validateField('order.name')
			},
			typeSelect(e) {
				this.showType = false
				this.model1.order.type_name = e.value[0].name
				this.model1.order.type_id = e.value[0].nid
				this.$refs.uForm.validateField('order.type')
			},

			getCustList() {
				uni.request({
					url: Config.baseUrl + '/api/app/custom.php?act=list',
					data: {
						name: this.svalue,
					},
					success: (res) => {
						this.custList = res.data.data
					}
				});
			},
			getTypeList() {
				uni.request({
					url: Config.baseUrl + '/api/app/custom.php?act=type',
					data: {},
					success: (res) => {
						this.typeList.push(res.data.data)
					}
				});
			},
			getTodayOrderList() {
				uni.request({
					url: Config.baseUrl + '/api/app/order.php?act=today',
					data: {},
					success: (res) => {
						this.todayOrderList = res.data.data
					}
				});
			},

			getUnshippedList() {
				uni.request({
					url: Config.baseUrl + '/api/app/order.php?act=unshipped',
					data: {},
					success: (res) => {
						this.unshippedList = res.data.data
					}
				});
			},


			getCode() {
				let that = this;
				uni.scanCode({
					// onlyFromCamera: true,
					success: function(res) {
						that.model1.order.express_sn = res.result
					},
					fail(res) {
						console.log(res)
					}
				});
			},
			sectionChange(index) {
				this.curNow = index;
			},

			gotoDetail(nid) {
				uni.navigateTo({
					url: '/pages/index/detail?nid=' + nid
				});
			},
			submit() {

				// if(this.model1.order.long_length ){

				// }

				// model1.order.width_length
				// model1.order.height_length

				this.$refs.uForm.validate().then(res => {
					//this.model1.order.image = res.data.data
					// console.log(this.fileList1[0])
					// console.log(this.model1.order)
					uni.request({
						url: Config.baseUrl + '/api/app/order.php?act=add', //仅为示例，并非真实接口地址。
						data: this.model1.order,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						method: 'POST',
						success: (res) => {

							if (res.data.status == 200) {
								uni.$u.toast('新建成功')

								let user_id = this.model1.order.user_id
								let cust_name = this.model1.order.cust_name
								uni.redirectTo({
									url: '/pages/index/index?user_id=' + user_id +
										'&cust_name=' + cust_name
								});
							} else {
								uni.$u.toast(res.data.msg)
							}

						}
					});

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},


			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)

					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						// url: lists[i].url
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: Config.baseUrl + '/api/app/order.php?act=upload_img', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {},
						success: (res) => {

							let d = JSON.parse(res.data)
							if (d.status == 200) {
								this.model1.order.image = d.data

								setTimeout(() => {
									resolve(d.data)
								}, 1000)
							} else {
								uni.$u.toast('上传失败')
							}


						}
					});
				})
			},


		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style scoped lang="scss">
	.page {
		margin: 20rpx;

		.submit {
			margin-top: 80rpx;
			background: #1e4297;
			color: #fff;
		}
	}
</style>